import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import css from './index.module.scss'
export default class Tag extends PureComponent {
    static propTypes = {
        // 类型
        type: PropTypes.string,
        // 是否圆角
        round: PropTypes.bool,
        // 是否空心
        plain: PropTypes.bool,
        // 尺寸
        size: PropTypes.string,
        // 样式
        style: PropTypes.object,
        onClick: PropTypes.func
    }

    static defaultProps = {
        // 可选值 primary|info|success|danger|warning
        type: 'default',
        round: false,
        plain: false,
        // 可选值 medium large
        size: ''
    }

    state = {
        sizes: ['medium', 'large'],
        types: ['primary', 'info', 'danger', 'warning', 'success']
    }

    handleClick = () => {
        typeof this.props.onClick === 'function' && this.props.onClick()
    }

    render() {
        const classes = ['tag']
        const { round, plain, style, size, type, className } = this.props   
        const { sizes, types } = this.state
        if (type && types.includes(type)) {
            classes.push(`tag-${type}`)
        } else {
            classes.push('tag-default')
        }
        if (round) {
            classes.push('tag-round')
        }
        if (plain) {
            classes.push('tag-plain')
        }
        if (size && sizes.includes(size)) {
            classes.push(`tag-${size}`)
        }
        return (
            <span className={`${className || ''} ${classes.map(item => css[item]).join(' ')}`} style={style} onClick={this.handleClick}>
                {this.props.children}
            </span>
        )
    }
}
